<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>能耗预测</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://kit.fontawesome.com/a2e0e6cfd3.js" crossorigin="anonymous"></script>
  <style>
    body {
      background-color: #f8f9fa;
    }
    .iphone-frame {
      width: 430px;
      height: 932px;
      border-radius: 40px;
      border: 1px solid #ccc;
      overflow: hidden;
      margin: 1rem auto;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <div class="iphone-frame bg-white">
    <!-- 顶部状态栏 -->
    <div class="flex justify-between items-center text-xs px-4 py-1 text-gray-500 bg-gray-100">
      <div>9:41 AM</div>
      <div class="flex gap-1 items-center">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>

    <!-- 顶部标题 -->
    <div class="flex items-center justify-between px-4 py-2 border-b">
      <h1 class="text-lg font-bold">能耗预测</h1>
      <button class="text-sm text-blue-500">设置</button>
    </div>

    <!-- 实验室选择 -->
    <div class="px-4 mt-2">
      <label class="block text-sm font-medium text-gray-700 mb-1">选择实验室</label>
      <select class="w-full border rounded px-3 py-2 text-sm">
        <option value="lab_1">实验室 A</option>
        <option value="lab_2">实验室 B</option>
      </select>
    </div>

    <!-- 预测图表 -->
    <div class="mt-4 px-4">
      <div class="text-sm font-semibold mb-1">未来7天能耗预测</div>
      <img src="https://source.unsplash.com/430x150/?forecast,energy" alt="预测图" class="rounded-md">
    </div>

    <!-- 模型解释图 -->
    <div class="mt-4 px-4">
      <div class="text-sm font-semibold mb-1">能耗影响因素分析（SHAP）</div>
      <img src="https://source.unsplash.com/430x150/?analytics,ai" alt="解释图" class="rounded-md">
    </div>

    <!-- 异常预测 -->
    <div class="mt-4 px-4">
      <div class="text-sm font-semibold mb-1">设备异常预测</div>
      <img src="https://source.unsplash.com/430x150/?alert,monitoring" alt="异常预测图" class="rounded-md">
    </div>

    <!-- 模型标签与说明 -->
    <div class="px-4 mt-4">
      <div class="text-sm text-gray-600 font-medium">当前模型：LSTM + XGBoost 混合模型</div>
      <div class="text-xs text-gray-500">自动学习过去30天数据进行预测，并实时调整</div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 w-full max-w-sm mx-auto bg-white border-t flex justify-around py-2">
      <a href="dashboard.html" class="flex flex-col items-center text-gray-500">
        <i class="fas fa-home text-lg"></i>
        <span class="text-xs">首页</span>
      </a>
      <div class="flex flex-col items-center text-blue-600">
        <i class="fas fa-bolt text-lg"></i>
        <span class="text-xs">预测</span>
      </div>
      <a href="device.html" class="flex flex-col items-center text-gray-500">
        <i class="fas fa-cogs text-lg"></i>
        <span class="text-xs">设备</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center text-gray-500">
        <i class="fas fa-user text-lg"></i>
        <span class="text-xs">我的</span>
      </a>
    </div>
  </div>
</body>
</html>